<template>
  <div class="content">
    <div class="content-nav">
      <span class="content-nav-course" :class="{active: activeIndex ==0 ? true: false}" @click="handleHeaderClick(0, 'borderAnimation','borderAnimation2')">课程</span>
      <span class="content-nav-course" :class="{active: activeIndex ==1 ? true: false}" @click="handleHeaderClick(1, 'borderAnimation2','borderAnimation')">讲座</span>
      <i ref="borderAnimation"></i>
      <i ref="borderAnimation2"></i>
    </div>
    <div class="content-box" v-if="activeIndex==0">
      <div class="content-wrapper">
        <router-link tag="div" to="/course/1" class="content-item" v-for="item of courseList" :key="item.id">
          <div class="content-desc-box">
            <p class="content-item-title">{{item.title}}</p>
            <p class="content-item-label">{{item.label}}</p>
            <p class="content-item-authour-label">xiaohao</p>
          </div>
          <div class="content-img-box">
            <img :src="item.imgURL" alt="">
          </div>
        </router-link>
      </div>
      <div class="content-more">更多课程<i class="iconfont icon-gengduo" style="position: relative; top: 0.02rem; left: 0.06rem;"></i></div>
    </div>
    <div class="content-box" v-else>
      <div class="content-wrapper">
        <router-link tag="div" to="/course/1"  class="content-item" v-for="item of lectureList" :key="item.id">
          <div class="content-desc-box">
            <p class="content-item-title">{{item.title}}</p>
            <p class="content-item-label2">{{item.label}}</p>
          </div>
          <div class="content-img-box">
            <img :src="item.imgURL" alt="">
          </div>
        </router-link>
      </div>
      <div class="content-more">更多讲座<i class="iconfont icon-gengduo" style="position: relative; top: 0.02rem; left: 0.06rem;"></i></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ClassifyContent',
  data: function () {
    return {
      activeIndex: 0,
      courseList: [{
        id: '0001', imgURL: '//edu-image.nosdn.127.net/b8cbbde8bc98409aad5227fde070df7d.png?imageView&quality=100', title: '从零开始学设计', label: '针对0基础，想学习设计的学员'
      }, {
        id: '0002', imgURL: '//edu-image.nosdn.127.net/9c3adc02cea44377a91c6716201bbe4c.png?imageView&quality=100', title: '老齐跟你聊包装', label: '帮助初学者快速了解包装基本知识，并进行简单应用'
      }, {
        id: '0003', imgURL: '//edu-image.nosdn.127.net/7594f6916fc94a16af474856d1de8786.png?imageView&quality=100', title: '包装世界', label: '国家精品课程，备受好评'
      }, {
        id: '0004', imgURL: '//edu-image.nosdn.127.net/29696616fe6e495a9b191244f2bd0bea.png?imageView&quality=100', title: '高分子化学', label: '不是化学，胜似化学的课程'
      }, {
        id: '0005', imgURL: '//edu-image.nosdn.127.net/b8cbbde8bc98409aad5227fde070df7d.png?imageView&quality=100', title: '智能包装', label: '相应国家号召，开设的新型课程'
      }, {
        id: '0006', imgURL: '//edu-image.nosdn.127.net/9c3adc02cea44377a91c6716201bbe4c.png?imageView&quality=100', title: '编程与开发', label: '小丽老师教你ps'
      }, {
        id: '0007', imgURL: '//edu-image.nosdn.127.net/7594f6916fc94a16af474856d1de8786.png?imageView&quality=100', title: 'AI与数据科学AI与数据科学AI与数据科学', label: '小萌老师教你卖萌小萌老师教你卖萌'
      }, {
        id: '0008', imgURL: '//edu-image.nosdn.127.net/29696616fe6e495a9b191244f2bd0bea.png?imageView&quality=100', title: '产品与运营', label: '小智老师教你解题三步式'
      }, {
        id: '0009', imgURL: '//edu-image.nosdn.127.net/7594f6916fc94a16af474856d1de8786.png?imageView&quality=100', title: 'AI与数据科学AI与数据科学AI与数据科学', label: '小萌老师教你卖萌小萌老师教你卖萌'
      }, {
        id: '0010', imgURL: '//edu-image.nosdn.127.net/29696616fe6e495a9b191244f2bd0bea.png?imageView&quality=100', title: '产品与运营', label: '小智老师教你解题三步式'
      }, {
        id: '0011', imgURL: '//edu-image.nosdn.127.net/b8cbbde8bc98409aad5227fde070df7d.png?imageView&quality=100', title: '职场通用技能', label: '跟小耗老师学编程'
      }, {
        id: '0012', imgURL: '//edu-image.nosdn.127.net/9c3adc02cea44377a91c6716201bbe4c.png?imageView&quality=100', title: '编程与开发', label: '小丽老师教你ps'
      }, {
        id: '0013', imgURL: '//edu-image.nosdn.127.net/7594f6916fc94a16af474856d1de8786.png?imageView&quality=100', title: 'AI与数据科学AI与数据科学AI与数据科学', label: '小萌老师教你卖萌小萌老师教你卖萌'
      }, {
        id: '0014', imgURL: '//edu-image.nosdn.127.net/29696616fe6e495a9b191244f2bd0bea.png?imageView&quality=100', title: '产品与运营', label: '小智老师教你解题三步式'
      }],
      lectureList: [{
        id: '0001', imgURL: '//edu-image.nosdn.127.net/b8cbbde8bc98409aad5227fde070df7d.png?imageView&quality=100', title: '当今时代的包装', label: '刘教授， 2009年美国留学归来，从事包装十余年，对包装领域颇有建树'
      }, {
        id: '0002', imgURL: '//edu-image.nosdn.127.net/9c3adc02cea44377a91c6716201bbe4c.png?imageView&quality=100', title: '行业前景', label: '帮助初学者快速了解包装基本知识，并进行简单应用'
      }, {
        id: '0003', imgURL: '//edu-image.nosdn.127.net/7594f6916fc94a16af474856d1de8786.png?imageView&quality=100', title: '自动化包装', label: '本次主要讲述自动化在包装上的应用，以及展望未来包装'
      }, {
        id: '0004', imgURL: '//edu-image.nosdn.127.net/29696616fe6e495a9b191244f2bd0bea.png?imageView&quality=100', title: '高分子化学', label: '不是化学，胜似化学的课程'
      }, {
        id: '0005', imgURL: '//edu-image.nosdn.127.net/b8cbbde8bc98409aad5227fde070df7d.png?imageView&quality=100', title: '智能包装', label: '相应国家号召，开设的新型课程'
      }, {
        id: '0006', imgURL: '//edu-image.nosdn.127.net/9c3adc02cea44377a91c6716201bbe4c.png?imageView&quality=100', title: '编程与开发', label: '小丽老师教你ps'
      }, {
        id: '0007', imgURL: '//edu-image.nosdn.127.net/7594f6916fc94a16af474856d1de8786.png?imageView&quality=100', title: 'AI与数据科学AI与数据科学AI与数据科学', label: '小萌老师教你卖萌小萌老师教你卖萌'
      }, {
        id: '0008', imgURL: '//edu-image.nosdn.127.net/29696616fe6e495a9b191244f2bd0bea.png?imageView&quality=100', title: '产品与运营', label: '小智老师教你解题三步式'
      }, {
        id: '0009', imgURL: '//edu-image.nosdn.127.net/7594f6916fc94a16af474856d1de8786.png?imageView&quality=100', title: 'AI与数据科学AI与数据科学AI与数据科学', label: '小萌老师教你卖萌小萌老师教你卖萌'
      }, {
        id: '0010', imgURL: '//edu-image.nosdn.127.net/29696616fe6e495a9b191244f2bd0bea.png?imageView&quality=100', title: '产品与运营', label: '小智老师教你解题三步式'
      }, {
        id: '0011', imgURL: '//edu-image.nosdn.127.net/b8cbbde8bc98409aad5227fde070df7d.png?imageView&quality=100', title: '职场通用技能', label: '跟小耗老师学编程'
      }, {
        id: '0012', imgURL: '//edu-image.nosdn.127.net/9c3adc02cea44377a91c6716201bbe4c.png?imageView&quality=100', title: '编程与开发', label: '小丽老师教你ps'
      }, {
        id: '0013', imgURL: '//edu-image.nosdn.127.net/7594f6916fc94a16af474856d1de8786.png?imageView&quality=100', title: 'AI与数据科学AI与数据科学AI与数据科学', label: '小萌老师教你卖萌小萌老师教你卖萌'
      }, {
        id: '0014', imgURL: '//edu-image.nosdn.127.net/29696616fe6e495a9b191244f2bd0bea.png?imageView&quality=100', title: '产品与运营', label: '小智老师教你解题三步式'
      }]
    }
  },
  methods: {
    handleHeaderClick: function (index, dom1, dom2) {
      this.activeIndex = index
      this.$emit('change', index)
      this.$refs[dom1].style.width = '0.65rem'
      this.$refs[dom2].style.width = 0
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~styles/stylus/varibles.styl"
@import '~@/assets/stylus/mixin.styl'
.content
  padding 0 0.2rem 1.1rem
  .content-nav
    display inline-block
    overflow hidden
    height .6rem
    line-height .6rem
    vertical-align top
    transition .3s
    color #9ba4b4
    font-size 0
    box-sizing border-box
    transition .5s all
    position relative
    &>span
      font-size .3rem
      margin 0 0.2rem 0 0
      position relative
    &>i
      position: absolute
      bottom: 0.06rem
      left: 0
      height: 2px
      background-color: #000
      transition: all 0.3s ease-out
      overflow hidden
    &>i:nth-of-type(1)
      width .65rem
     &>i:nth-of-type(2)
      left .8rem
    .active
      color #000
      font-size .32rem

  .content-box
    .content-wrapper
      width 100%
      display inline-block
      .content-item
        width 97%
        height 1.5rem
        padding 0.15rem 0.1rem 0.1rem
        font-size 0
        box-shadow: 4px 6px 10px 0 rgba(95, 101, 105, 0.15)
        margin-bottom .1rem
        margin-right 3%
        border-radius .15rem
        .content-img-box
          display inline-block
          vertical-align: top;
          width 40%
          height 100%
          &>img
            width 100%
            height 100%
            border-radius .1rem
        .content-desc-box
          display inline-block
          vertical-align: top;
          width 60%
          height 100%
          box-sizing border-box
          font-size .3rem
          padding-top .15rem
          position relative
          .content-item-title
            padding .05rem .1rem
            line-height .4rem
            font-size .30rem
            font-weight bold
            ellipsis()
          .content-item-label
            padding 0 0.1rem
            line-height .35rem
            font-size .25rem
            color #9199A1
            ellipsis()
          .content-item-label2
            padding 0 0.1rem
            line-height .35rem
            font-size .25rem
            color #9199A1
            overflow hidden
            ellipsis2()
          .content-item-authour-label
            position absolute
            right 0.2rem
            top 0.92rem
            color #9199A1
    .content-more
      background-color #f5f7fa
      line-height .5rem
      text-align center
      color #222
      border-radius .1rem
      margin-top .05rem
</style>
